'use strict';

const Controller = require('egg').Controller;
const cheerio = require('cheerio')
class DemoController extends Controller {
  async index() {
    let ctx = this.ctx;
	const data = await ctx.service.spider.getData('1');
	const $ = cheerio.load(data.data);
	let url = 'http://wiki.joyme.com';
	let html = `<style>
	a{text-decoration: none;color: #3b8bff;background: none;}p{margin:0;}
	body{background:url(http://p7.qhimg.com/t01a90765a503d2aa8d.jpg) fixed 50% 0 #d1d1d1;}
	.joymewiki-content-block{width:1074px;margin:65px auto;padding:25px;background:#fff;}
	.imgItem{margin:5px;border: 1px solid #8a8a8a;background:#f0f0f0;display:inline-block;}
	.imgItem .item{padding:8.4px;border-bottom: 1px solid #8a8a8a;}
	.imgItem .name{padding:8.4px;text-align:center;}
	.MenuBox ul{padding:0;}
	.MenuBox li{height: 40px;background: #515151;line-height: 40px;color: #fff;cursor: pointer;list-style-type: none;padding: 0px 29px;font-size: 16px;display:inline-block;}
	.MenuBox li.hover{background: #393939;}
	</style>`;
	let menuhtml = "";
	let htmllist = "";
	let jsonstr = "";
	let Menujsonstr = "";
	$(".MenuBox li").each(function(i){
		menuhtml += (i==0)?"<li class='hover'>"+$(this).text()+"</li>":"<li>"+$(this).text()+"</li>";
		Menujsonstr += "{kind:'"+i+"',name:'"+$(this).text()+"'}";
	});
	menuhtml = "<div class='MenuBox'><ul>"+menuhtml+"</ul></div>";
	html += menuhtml;
	$("#Contentbox2 div[id^='con_']").each(function(){
		let id = $(this).attr("id");
		let style = $(this).attr("style");
		let aa = "";
		$(this).find(".wikitable").each(function(){
			let href = url + $(this).find("a").eq(0).attr("href");
			aa += "<div class='imgItem' title='"+$(this).find("tr").eq(1).find("a").text()+"'><div class='item'><a href='"+href+"' target='_blank'><img src='"+$(this).find("img").eq(0).attr("src")+"' width='150' height='150'/></a></div>"+
			"<a href='"+href+"' target='_blank'><p class='name'>"+$(this).find("tr").eq(1).find("a").text()+"</p></a></div>";
			jsonstr += "{src:'"+$(this).find("img").eq(0).attr("src")+"',name:'"+$(this).find("tr").eq(1).find("a").text()+"'}";
		});
		let hh = "<div id='"+id+"' style='"+style+"'>"+aa+"</div>"
		htmllist+=hh;
	});
	/*$("#Contentbox2 .wikitable").each(function(){
		htmllist += "<div class='imgItem'><div class='item'><img src='"+$(this).find("img").eq(0).attr("src")+"' width='150' height='150'/></div>"+
		"<p class='name'>"+$(this).find("tr").eq(1).find("a").text()+"</p></div>";
		jsonstr += "{src:'"+$(this).find("img").eq(0).attr("src")+"',name:'"+$(this).find("tr").eq(1).find("a").text()+"'}";
	});*/
	htmllist = "<div class='Contentbox2' id='Contentbox2'>"+htmllist+"</div>";
	html += htmllist;
	html += "<div style='color:#0000ff;width:100%'>"+Menujsonstr+"</div>"
	html += "<div style='color:#ff0000;width:100%'>"+jsonstr+"</div>"
	html = "<div class='joymewiki-content-block'>"+html+"</div>";
	ctx.body = html+`<script src="http://code.jquery.com/jquery-1.4.1.js"type="text/javascript"></script>
	<script>
	$(".MenuBox li").each(function(i){
		$(this).click(function(){
			console.info(i);
			$(".MenuBox li").removeClass("hover");
			$(this).addClass("hover");
			$("#Contentbox2 div[id^='con_']").hide();
			$("#Contentbox2 div[id^='con_']").eq(i).show();
		});
	});
	</script>
	`;
  }
}

module.exports = DemoController;
